<template>
  <div>
    <div>
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;height:46px">
        <el-form :inline="true" >
          <el-form-item>
            <el-input size="small" v-model="name" placeholder="分组名称" style="margin-top:4px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getList()" style="line-height:14px">查询</el-button>
          </el-form-item>
          <el-form-item class="button-align" style="float: right" v-if="getAuth(0)">
            <el-button type="primary" size="small" @click="
              dialogTitle = '新增商品分组';
              entity.id = 0;
              entity.name = '';
              entity.describ = '';
              entity.style = 'small';
              showAdd = true;
            ">
              新增商品分组
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table  border style="width: 100%; font-size: 12px;" :data="list" row-class-name="tabRow" tooltip-effect="light"  v-loading="listLoading">
        <el-table-column type="selection" v-if="false"></el-table-column>
        <el-table-column align="center" prop="name" show-overflow-tooltip  label="分组名称"></el-table-column>
        <el-table-column align="center" prop="style" :formatter="formatStyle" label="列表样式"></el-table-column>
        <el-table-column align="center" prop="describ" show-overflow-tooltip label="分组描述"></el-table-column>
        <el-table-column align="center" prop="createTime" :formatter="formatDate" label="创建时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template scope="scope">
            <el-button size="small" type="warning" @click="clickbutton(scope.row)" v-if="getAuth(1)">修改</el-button>
            <el-button size="small" type="danger" @click="delSubmit(scope.row.id)" v-if="getAuth(2)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar" style="margin-top: 15px;" v-show="!listLoading">
        <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" wi :page-sizes="[10, 20, 30]" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :page-size="pageSize" :current-page="page" :total="total" style="float:right;">
        </el-pagination>
      </el-col>
      <!--新增/修改-->
      <el-dialog :title="dialogTitle" :visible.sync="showAdd" :close-on-click-modal="false" @close="resetRetail" style="top:10%">
        <el-form :model="entity" label-width="100px" :rules="retailFormRules" ref="retail" style="margin-top:-20px">
          <el-form-item label="分组名称" prop="name">
            <el-input v-model="entity.name" size="small" :disabled="dialogTitle!='新增商品分组'"></el-input>
          </el-form-item>
          <el-form-item label="列表样式" prop="style" >
            <el-radio class="radio" v-model="entity.style" label="small">小图</el-radio>
            <el-radio class="radio" v-model="entity.style" label="list">列表</el-radio>
          </el-form-item>
          <el-form-item label="分组描述" prop="describ">
            <el-input  type="textarea" :row="2" v-model="entity.describ"></el-input>
          </el-form-item>
        </el-form>
        <div scope="footer" class="dialog-footer"
             style="text-align: right;">
          <el-button @click.native="resetRetail">取消</el-button>
          <el-button type="primary" @click.native="handleSubmit" :loading="saveLoading">保存</el-button>
        </div>
      </el-dialog>
    </div>
    <!--<menuControl v-if="!isshow" :roleEntity="roleEntity" @clickbutton="clickbutton" @initRoleList="initRoleList"></menuControl>-->
  </div>
</template>

<script>
  import {formatDate, sessionOut, resetBreads, buttonAuth} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      var validateName = (rule, value, callback) => {
        if (this.dialogTitle === '新增商品分组') {
          var para = {
            name: this.entity.name,
            type: this.loginType
          }
          this.$http.post('/smartLight/web/retailGoodsGroup/validate.htm', para).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              var total = resBody.result
              if (total > 0) {
                callback(new Error('已存在分组名称'))
              } else {
                callback()
              }
              // autoHeight2() // iframe调整
            } else if (resBody.isSuccess === 2) {
              this.listLoading = false
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          })
        } else {
          callback()
        }
      }
      return {
        name: '',
        total: 0,
        page: 1,
        pageSize: 10,
        listLoading: false,
        list: [],
        saveLoading: false,
        options: [{
          value: 'small',
          label: '小图'
        },
        {
          value: 'list',
          label: '列表'
        }],
        entity: {
          id: 0,
          name: '',
          style: '',
          describ: '',
          createTime: ''
        },
        retailFormRules: {
          name: [
            {required: true, message: '请输入分组名称', trigger: 'blur'},
            {validator: validateName, trigger: 'blur'},
            {max: 50, message: '最多输入50个字符', trigger: 'blur'}
          ],
          style: [
            {required: true, message: '请选择列表样式', trigger: 'blur'}
          ],
          describ: [
            {max: 255, message: '最多输入255个字符', trigger: 'blur'}
          ]
        },
        showAdd: false,
        dialogTitle: '新增商品分组',
        retailButtons: [724, 725, 726],
        loginType: ''
      }
    },
    methods: {
      // 权限控制
      getAuth (index) {
        return buttonAuth(index, 1, [], this.retailButtons, [])
      },
      getList () {
        this.listLoading = true
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          name: this.name,
          type: this.loginType
        }
        this.$http.post('/smartLight/web/retailGoodsGroup/getList.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements
            this.list = resBody.result.content
            this.listLoading = false
            if (this.$route.query.pt === 'add') {
              this.showAdd = true
            }
            // autoHeight2() // iframe调整
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      }, // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.getList()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.page = val
        this.currentPage = val
        this.getList()
      },
      clickbutton (val) {
        this.showAdd = true
        this.dialogTitle = '修改商品分组'
        this.entity.id = val.id
        this.entity.name = val.name
        this.entity.describ = val.describ
        this.entity.style = val.style
      },
      resetRetail () {
        this.showAdd = false
        this.$refs['retail'].resetFields()
      },
      // 类型转换
      formatStyle (row, column) {
        return row.style === 'list' ? '列表' : '小图'
      },
      formatDate (row, column) {
        var date = new Date(row.createTime)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      delSubmit (id) {
        this.$confirm('确认删除选中记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var para = {
            id: id,
            type: this.loginType
          }
          this.$http.post('/smartLight/web/retailGoodsGroup/del.htm', para).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else if (resBody.isSuccess === 2) {
              this.listLoading = false
              sessionOut(this) // session超时处理
            } else {
              this.getList()
              this.$message({
                type: 'success',
                message: '删除失败!'
              })
            }
          })
        }).catch(() => {
          this.getList()
        })
      },
      handleSubmit () {
        this.$refs.retail.validate((valid) => {
          if (valid) {
            this.saveLoading = true
            var para = {
              style: this.entity.style,
              name: this.entity.name,
              describ: this.entity.describ,
              id: this.entity.id,
              type: this.loginType
            }
            var url = this.dialogTitle === '新增商品分组' ? '/smartLight/web/retailGoodsGroup/add.htm' : '/smartLight/web/retailGoodsGroup/update.htm'
            this.$http.post(url, para).then(response => {
              var resBody = response.body
              this.saveLoading = false
              if (resBody.isSuccess === 0) {
                this.showAdd = false
                this.getList()
                // autoHeight2() // iframe调整
              } else if (resBody.isSuccess === 2) {
                sessionOut(this) // session超时处理
              } else {
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'error'
                })
              }
            })
          }
        })
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        resetBreads(this)
        user = JSON.parse(user)
        this.loginType = user.type
      }
      this.getList()
    }
  }
</script>

<style>
  .is-light{
    max-width: 600px;
  }
</style>
